<template>
	<view>
		<!-- 活动消息 -->
		<view class="campaign">
			<view class="campaign_box"> 
				<view class="campaign_box_list" v-for="(item,index) in list" :key="index">
					<img :src=item.img alt="">
					<view class="context">
						<view class="title">
							<p class='title_p'>{{item.title}}</p>
							<p class="time_p">{{item.time}}</p>
						</view>
						<p class='context_p'>{{item.text}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					img:"../../static/psx/psx6.png",
					title:"慈善路上 永不止步",
					time:"一天前",
					text:"在这个暑期给孩子最真实的成长回忆,海银“爱在路上”公益夏令营,让“真实的生活”触摸到孩子们的心灵,遇见更好的自己!在同一个世界,同一片蓝天下,我们小小营员们将奔跑在爱的世界,走进自然..."
				},{
					img:"../../static/psx/psx7.png",
					title:"慈善路上 永不止步",
					time:"一天前",
					text:"在这个暑期给孩子最真实的成长回忆,海银“爱在路上”公益夏令营,让“真实的生活”触摸到孩子们的心灵,遇见更好的自己!在同一个世界,同一片蓝天下,我们小小营员们将奔跑在爱的世界,走进自然..."
				}]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.campaign{
		width: 100%;
		// background-color: pink;
		.campaign_box{
			width: 90%;
			margin: 0 auto;
			.campaign_box_list{
				width: 100%;
				// height: 450upx;
				margin-top: 40upx;
				border-radius: 20upx;
				background-color: white;
				box-shadow:2px 2px 10px lightgray;
				img{
					width: 100%;
					border-radius: 20upx;
				}
				.context{
					width: 90%;
					height: 230upx;
					margin: 20upx auto;
					.title{
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.title_p{
							font-weight: bold;
							font-size: 34upx;
						}
						.time_p{
							font-size: 20upx;
							color: rgb(101,101,101);
						}
					}
					.context_p{
						width: 100%;
						// height: 300upx;
						// text-align: center;
						margin-top: 10upx;
						font-size: 20upx;
						color: rgb(142,142,142);
					}
				}
			}
		}
	}
</style>
